<!--文章管理-->

<template>
    <div>
        <el-tabs type="border-card" v-model="activeName">
            <!--个人中心部分-->
            <el-tab-pane label="消息列表" name="second">
                <el-row :gutter="20">
                    <el-col :span="14">
                        <el-button type="primary" @click="go">发布消息</el-button>
                    </el-col>

                    <el-col :span="10">
                        <el-form :label-position="labelPosition" label-width="80px" :inline="true" ref="form" :model="pageAbout">
                            <el-form-item prop="title">
                                <el-input placeholder="输入关键词搜索" v-model="pageAbout.title"></el-input>
                            </el-form-item>
                            <el-form-item >
                                <el-button type="primary" @click="resetForm('form')">重置</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="found">查找</el-button>
                            </el-form-item>
                        </el-form></el-col>
                </el-row>
                <div class="dateMsg" v-if="pageCount" style="color: red">总计<b>{{pageCount}}</b>条数据</div>
                <el-table :data="tableData" style="width: 100%" v-loading="listLoading">
                    <el-table-column prop="title" label="消息标题">
                    </el-table-column>
                    <el-table-column prop="flag" label="状态" :formatter="banFormat">
                    </el-table-column>
                    <el-table-column prop="updatetime" label="最后更新时间" >
                    </el-table-column>
                    <el-table-column prop="operator" label="最后操作人">
                    </el-table-column>
                    <el-table-column prop="readnum" label="阅读人次">
                    </el-table-column>
                    <el-table-column prop="date" label="管理">
                        <template scope="scope">
                            <el-button  type="text" size="small" @click="look(scope.row.id)">查看</el-button>
                            <el-button type="text" size="small" @click="edit(scope.row.id)">编辑</el-button>
                            <el-button v-if="scope.row.flag==1" type="text" size="small" @click="forBidden(scope.row.id,2)">启用</el-button>
                            <el-button v-else type="text" size="small" @click="forBidden(scope.row.id,1)">禁用</el-button>
                            <el-button type="text" size="small" @click="del(scope.row.id)">删除</el-button>
                            <!--<el-button v-else type="text" size="small" @click="forBidden(scope.row.enterprise_id,1)">禁用</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination" style="width:200px;margin-top:10px;margin-left:75% ">
                    <el-pagination layout="prev, pager, next"  :total='pageCount' @current-change="getCurrentpage" :page-size=10 ></el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import Bus from '@/config/bus.js'
    import _http from '@/components/common/http.vue'
    import _param from '@/components/common/param.vue'
    import fabuxxi from '@/components/message/fabuxxi.vue'
    export default {
        components:{fabuxxi},
        data() {
            return {
                userid:'',
                listLoading:false,
                currentPage:1,
                pageCount:0,
                pageAbout:{
                    userid:'',
                    title:'',
                    pageNumber:1,
                    pageSize:10
                },
                apiPort:{
///                    列表页内容接口
                    msgList:"information/list",
//                    启用禁用
                    forbid:'information/changeFlag',
//                    删除接口
                    del:'information/delete'
                },
                activeName: 'second',
                labelPosition: 'right',
                tableData: []
            };
        },
        mounted(){
            this.limit = JSON.parse(localStorage.getItem("limitList"))
            this.userid=localStorage.getItem('userId')
            this.pageAbout.userid = localStorage.getItem('userId')
            this.getCurrentpage(1)
            var that=this
            Bus.$on('closeA',function(val){
            })
        },
        beforeDestroy(){
            Bus.$off("closeA")
        },
        methods: {
            found(){
                this.pageAbout.pageNumber=1
                this.getCurrentpage(1)
            },
            resetForm(formName){
                this.$refs[formName].resetFields();
            },
            //跳转到指定页
            getCurrentpage(val){
                this.listLoading=true
                var that = this
                this.currentPage = val ? val:1
                this.pageAbout.pageNumber=val ? val:1
                var params = that.querystring.stringify(this.pageAbout)
                _http.axiosRequest(that,that.apiPort.msgList,params,(res)=>{
                    that.pageCount=res.data.data.total

                this.listLoading=false
                that.tableData = res.data.data.records
            })
            },
            banFormat:function(row,column){
                var ban = row[column.property];
                if ( ban == 1 ){
                    return "禁用";
                }
                return "启用";
            },
            //        启用禁用
            forBidden(id,par){
                var that = this
                var param = {'id':id,flag:par,userid:that.userid}
                var params = that.querystring.stringify(param)
                _http.axiosRequest(that,that.apiPort.forbid,params,(res)=>{
                    console.log(res.data)
                that.getCurrentpage(that.currentPage)
            })
            },
//            删除接口
            del(id){
                var that = this
                this.$confirm('此操作将删除该消息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var param = {id:id,userid:that.userid}
                    var params = that.querystring.stringify(param)
                    _http.axiosRequest(that,that.apiPort.del,params,(res)=>{
                    console.log(res.data)
                that.getCurrentpage(that.currentPage)
                if(res.data.code==100){
                    that.$message({
                        message: '删除成功',
                        type: 'success'
                    });
//                    that.getCurrentpage(that.currentPage)
                }else{
                    that.$message({
                        message: res.data.msg,
                        type: 'warning'
                    });
                }
            })
            }).catch(() => {

                });


//                var that = this
//                var param = {id:id,userid:that.userid}
//                var params = that.querystring.stringify(param)
//                _http.axiosRequest(that,that.apiPort.del,params,(res)=>{
//                    console.log(res.data)
//                that.getCurrentpage(that.currentPage)
//            })
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            go(){
                this.$router.push({path:'/message/fabuxxi',query:{info:1,page:this.currentPage}})
            },
            edit(id){
                this.$router.push({path:'/message/fabuxxi',query:{info:id,page:this.currentPage}})
            },
            look(id){
                this.$router.push({path:'/message/look',query:{info:id}})
            }
        }
    };
</script>